/**
 * Created by Adi(adi@imeth.cn) on 2018/8/31.
 */
import React from 'react';
import { Modal, Form } from 'antd';
import { autobind } from 'core-decorators';
import PropTypes from 'prop-types';

// 基础视图

@autobind
class BasicModelView extends React.Component {
  static propTypes = {
    visible: PropTypes.bool, // 弹窗视图是否显示
    title: PropTypes.string.isRequired, // 弹窗标题
    mask: PropTypes.bool, // 是否遮罩
    maskClosable: PropTypes.bool, // 遮罩是否可操作
    okText: PropTypes.string, // OK按钮显示文本
    zIndex: PropTypes.number,
    onCancel: PropTypes.func, // 取消操作
    onOk: PropTypes.func, // 确认操作
    extra: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]), // 渲染的内容
    footerExtra: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]), // 渲染的按钮  默认 取消 确认
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  };

  static defaultProps = {
    zIndex: 1000,
    okText: '确认',
    visible: false,
    mask: true,
    maskClosable: true,
    width: 700,
  };

  constructor(props) {
    super(props);
    let { visible } = this.props;
    this.state = {
      visible,
    };
  }

  // react16.3新生命周期 接收props 修改state 返回类似setState()
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.visible === prevState.visible) {
      // 返回Null 不修改state
      return null;
    }
    return {
      visible: prevState.visible,
    };
  }

  render() {
    let {
      visible,
      title,
      okText,
      zIndex,
      extra,
      footerExtra,
      mask,
      maskClosable,
      width,
    } = this.props;
    return (
      <Modal
        title={title}
        zIndex={zIndex}
        visible={visible}
        centered={true}
        okText={okText}
        onCancel={this._onCancel}
        onOk={this._onOk}
        footer={footerExtra}
        mask={mask}
        maskClosable={maskClosable}
        width={width}
      >
        {extra}
      </Modal>
    );
  }

  // 取消操作
  _onCancel() {
    let { onCancel } = this.props;
    onCancel && onCancel();
    this.setState({ visible: false });
  }

  // 确认操作
  _onOk() {
    let { onOk } = this.props;
    onOk && onOk();
  }
}

export default BasicModelView;
